<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .result{
                width: 100vw;
                height:100vh;
                margin: 0 auto;
                text-align: center;
                line-height: 100vh;
                font-size: 50px;
                font-weight: 900;
            }
            
        
        </style>
    </head>
    <body>
        <button>点击发送请求</button>
        <div class="result"></div>
        <script type="text/javascript">
            const btn = document.querySelector("button");
            const result = document.querySelector(".result");

            btn.addEventListener("click",function(){
                const xhr = new XMLHttpRequest();
                //超时设置
                xhr.timeout = 2000;
                //超时回调
                xhr.ontimeout = function(){
                    alert("网络异常，请稍后重试！");
                }
                //网络异常回调
                xhr.onerror =function(){
                    alert("你的网络似乎有一些问题！");
                }

                xhr.open("GET","http://127.0.0.1:8000/delay");
                xhr.send();
                xhr.onreadystatechange = function(){
                    if(xhr.readyState === 4){
                        if(xhr.status >= 200 && xhr.status <300){
                            result.innerHTML = xhr.response;
                        }
                    } 
                };

            });
            
        
        </script>
    </body>
</html>